<template>
  <Search ref="search" @search="handlerSearch"></Search>
  <DataList
    ref="dataList"
    :notices="notices"
    @data-single="handlerSingle"
    @data-batch="handlerBatch"
    @data-refresh="handlerRefresh"
  ></DataList>
</template>

<script setup>
import DataList from '@/components/notice/DataList.vue'
import Search from '@/components/notice/Search.vue'
import request from '@/util/request'
import { ElNotification } from 'element-plus'
import { onMounted, provide, ref } from 'vue'

const notices = ref([])

const handlerSearch = (item) => {
  console.log('搜索了', item)
  request
    .post('/admin/notice/search', item)
    .then((res) => {
      notices.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}
// 单个操作
const handlerSingle = (item, type) => {
  console.log('单个操作', item, type)
}

// 批量操作
const handlerBatch = (item, type) => {
  console.log('批量操作', item, type)
}

const handlerRefresh = () => {
  console.log('执行了')

  getNotices()
}

provide('refresh', handlerRefresh)

const getNotices = () => {
  request
    .get('/admin/notice/list')
    .then((res) => {
      console.log('获取成功：', res)
      notices.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

onMounted(() => {
  getNotices()
})
</script>

<style scoped>
body {
  height: calc(100vh - 60px);
  background: #fff;
}
</style>
